<template>
  <div id="mainDom" ref="mainDom" style="height: 350px; width: 100%"></div>
</template>

<script>
import { chome_halfYearCost } from "@/apis/clientSide/Home/home";
// import echarts from "echarts";
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");
require("echarts/lib/chart/bar");

export default {
  mounted() {
    this.gethalfYearCost();
  },
  data() {
    return {
      //代发
      orders: [],
      //退件
      reception: [],
      //转运
      transfer: [],
    };
  },
  methods: {
    createChart() {
      //   var chartDom = ;
      var myChart = echarts.init(this.$refs.mainDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sept",
              "Oct",
              "Nov",
              "Dec",
            ],
          },
        ],
        yAxis: [
          {
            name: "单位：万",
            type: "value",
          },
        ],
        series: [
          {
            color: "#bc8dee",
            name: "代发",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.orders,
          },
          {
            color: "#ffa897",
            name: "转运",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.transfer,
          },
          {
            color: "#89c3f8",
            name: "退件",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: this.reception,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    async gethalfYearCost() {
      this.orders = [];
      this.reception = [];
      this.transfer = [];
      let { code, responseBody } = await chome_halfYearCost();
      if (code === "200") {
        for (let key in responseBody) {
          this.orders.push(responseBody[key].orders * 1);
          this.reception.push(responseBody[key].reception * 1);
          this.transfer.push(responseBody[key].transfer * 1);
        }
        this.createChart();
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>